<template>
	<view class="rider-home">
		<NavBar title="工作中" :tips="isTips" />
		<view class="content" v-if="onLine==1">
			<view class="order-list" v-if="orderList.length && isOpen != 0">
				<OrderItem 
					page="home" 
					:orderInfo="item" 
					v-for="(item, index) in orderList" 
					:key="item" 
					@rush="rushOrder(index)" 
          @timeup="timeup(index)"
				/>
			</view>
			<Empty txt="暂时没有可配送订单~" v-if="orderList.length == 0 && isOpen != 0"/>
			<Empty txt="禁止接单! 请联系代理商协商解封!" v-if="isOpen == 0"/>
			<view class="refresh" :style="{bottom}" @tap="refreshOrder" v-else>
				<uni-icons type="loop" size="14" color="#ffffff" /> 刷新大厅订单
			</view>
		</view>
		<ISJob @TopLine="topLine" v-else/>
		<TabBar tabType="rider" :currentPage="0" />
	</view>
</template>

<script setup>
	import { computed, ref } from 'vue';
	import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app'
	import TabBar from '@/components/TabBar.vue';
	import NavBar from '../components/RiderNavBar.vue';
	import ISJob from '../components/Empty.vue';
	import Empty from '@/components/Empty.vue';
	import OrderItem from '../components/OrderItem.vue';
	import { GetLobbyOrderApi, GetRiderInfoApi, EditRiderInfoApi } from '@/service/rider.js'
	import { useAddressStore } from '@/store/index.js'
  const { screenHeight, safeArea } = uni.getSystemInfoSync()
  const bottom = computed(() => screenHeight - safeArea.bottom + 65 + 'px')
	const isTips = ref(0)
	const page = ref(1)
	const pageSize = ref(15)
	const total = ref(0)
	const orderList = ref([])
	const onLine = ref(1) // 0：休息；1：工作中
  const isOpen = ref(1) // 是否禁止接单 0：禁止接单；1：允许接单
	const refreshOrder = () => {
    isTips.value = 0
		page.value = 1
		orderList.value = []
		getOrderList()
	}
	const rushOrder = (i) => {
		getApp().globalData.toast('操作成功')
		orderList.value.splice(i, 1)
	}
  const timeup = (i) => {
    orderList.value = []
    page.value = 1
    getOrderList()
  }
	// 获取订单列表
	const getOrderList = () => {
		const { lonlat } = useAddressStore()
		let params = {
			page: page.value,
			page_size: pageSize.value,
			latitude: lonlat.latitude,
			longitude: lonlat.longitude,
		}
		GetLobbyOrderApi(params).then(res => {
			total.value = res.total
			orderList.value.push(...res.data)
			orderList.value.forEach(item => {
				if(item.is_h == 1) isTips.value++
			})
		})
	}
	// 获取棋手信息
	const getRiderInfo = () => {
		GetRiderInfoApi().then(res => {
			onLine.value = res.data.on_line
      isOpen.value = res.data.apply.is_open
			if(onLine.value == 1) {
        orderList.value = []
        page.value = 1
        getOrderList()
      }
		})
	}
	// 上线
	const topLine = () => {
		EditRiderInfoApi({on_line: 1}).then(res => {
			page.value = 1
			orderList.value = []
			onLine.value = 1
			getOrderList()
		})
	}
	onLoad(() => {
		const { SETLONLAT } = useAddressStore()
		SETLONLAT()
	})
	onShow(() => {
    isTips.value = 0
		getRiderInfo()
	})
	onReachBottom(() => {
		if(page.value*pageSize.value>=total.value) return
		page.value = page.value + 1
		getOrderList()
	})
</script>

<style lang="scss" scoped>
	.rider-home {
		width: 100%;
		box-sizing: border-box;
		.content {
			width: 100%;
			padding: 10px 12px;
			padding-bottom: calc(constant(safe-area-inset-bottom) + 68px);
			padding-bottom: calc(env(safe-area-inset-bottom) + 68px);
			box-sizing: border-box;
		}
		.refresh {
			position: fixed;
			bottom: 65px;
			left: 50%;
			transform: translateX(-50%);
			width: 107px;
			height: 28px;
			color: #FFFFFF;
			font-size: 12px;
			line-height: 28px;
			text-align: center;
			border-radius: 14px;
			background: rgba(0,0,0,0.7);
		}
	}
</style>
